<template>
    <div class="detail">
        <detail-param>
            <template v-slot:buy>
                <a href="/#/order/confirm" class="btn">立即购买</a>
                <a href="javascript:;" class="btn">加入购物车</a>
            </template>
        </detail-param>
        <div class="container">
            <!-- BEGIN product -->
			<div class="product">
                <!-- BEGIN product-detail -->
                <div class="product-detail">
                    <!--BEGIN swiper -->
                    <div class="product-image-swiper">
                        <swiper class="swiper" v-bind:options="swiperOption">
                            <swiper-slide v-for="(item,detail) in slideList" v-bind:key="detail">
                                <a v-bind:href="'/#/product/'+item.id"><img v-bind:src="item.img"></a>
                            </swiper-slide>
                            <!-- Optional controls -->
                            <div class="swiper-pagination"  slot="pagination"></div>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                    <!-- END swiper -->
                    <!-- BEGIN product-information -->
                    <div class="product-info">
                        <!-- BEGIN product-info-header -->
                        <div class="product-info-header">
                            <h1 class="product-title"><span class="label label-success">40% OFF</span> 可试听：指弹吉他精品课程 </h1>
                            <ul class="product-category">
                                <li><a href="#">声乐</a></li>
                                <li>/</li>
                                <li><a href="#">乐器</a></li>
                                <li>/</li>
                                <li><a href="#">热门乐器</a></li>
                            </ul>
                        </div>
                        <!-- END product-info-header -->
                        <!-- BEGIN product-warranty -->
                        <div class="product-warranty">
                            <div class="content_top row">
                                <!-- 这里三个div应该并列浮动 -->
                                <div class="pic_box1 col-md-2">
                                    <p class="pic">
                                        <img src="images/avator/man.jpg" />
                                        <span class="pic_1"></span>
                                    </p>
                                    <span class="on_line">在线</span>
                                </div>
                                <div class="pic_box2 col-md-5">
                                    <!-- 这个div应该在一行里 -->
                                    <div>
                                        皮卡
                                        <!-- 这里应该是图片 -->
                                        <i class="gender"><span><img src="images/icon/detail_icon/man.png" height="20" width="20" alt="男"></span></i>
                                        <i class="renzheng"><span><img src="images/icon/detail_icon/vip.png" height="20" width="20" alt="平台认证"></span></i>
                                        <i class="daoshi"><span><img src="images/icon/detail_icon/sapling.png" height="20" width="20" alt="明星导师"></span></i>
                                        <i class="peichang"><span><img src="images/icon/detail_icon/security.png" height="20" width="20" alt="未完成课程赔偿"></span></i>
                                    </div>
                                    <!-- 这个div应该在一行里 -->
                                    <div>
                                        <!-- id号 -->
                                        <div class="id">
                                            ID：111111
                                        </div>
                                    </div>
                                </div>
                                <div class="box3 col-md-4">
                                    <p class="box3-1">
                                        <img src="images/icon/detail_icon/add_user.png" height="20" width="20" alt="">
                                        关注
                                    </p>
                                    <p class="box3-2">
                                        51
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- END product-warranty -->
                        <!-- BEGIN product-info-list -->
                        <div class="product-feature">
                            <div><b>课程亮点：</b></div>
                            <ul class="product-info-list">
                                <li><i class="fa fa-circle"></i> 指弹吉他独奏督促监督学习</li>
                                <li><i class="fa fa-circle"></i> 课程针对个人量身定制</li>
                                <li><i class="fa fa-circle"></i> 可自主灵活预约</li>
                                <li><i class="fa fa-circle"></i> 结合打板伴奏主音结合等乐队效果演绎</li>
                            </ul>
                        </div>
                        <!-- END product-info-list -->
                        <!-- BEGIN product-social -->
                        <div class="product-social">
                            <ul>
                                <li class="icon-1"><img src="images/icon/detail_icon/alipay-square-fill.png" alt=""></li>
                                <li class="icon-1"><img src="images/icon/detail_icon/facebook-fill.png" alt=""></li>
                                <li class="icon-1"><img src="images/icon/detail_icon/QQ-square-fill.png" alt=""></li>
                                <li class="icon-1"><img src="images/icon/detail_icon/taobao-square-fill.png" alt=""></li>
                                <li class="icon-1"><img src="images/icon/detail_icon/twitter-square-fill.png" alt=""></li>
                                <li class="icon-1"><img src="images/icon/detail_icon/weibo-square-fill.png" alt=""></li>
                            </ul>
                        </div>
                        <!-- END product-social -->
                        <!-- BEGIN product-purchase-container -->
                        <div class="product-purchase-container">
                            <div class="product-discount">
                                <span class="discount">50.00/天</span>
                            </div>
                            <div class="product-price">
                                <div class="price">30.00/天</div>
                            </div>
                            <div class="product-btn">
                                <a class="btn btn-inverse btn-lg" style="background: #F90;border: none;">加入购物车</a>
                                <a class="btn btn-inverse btn-lg" style="background: #F63;border: none;">购买课程</a>
                            </div>
                            
                        </div>
                        <!-- END product-purchase-container -->
                    </div>
                    <!-- END product-information -->
                </div>
                <!-- END product-detail -->
                <!-- BEGIN product-tab -->
                <div class="product-tab">
                    <!-- BEGIN #product-tab -->
                    <ul id="product-tab" class="nav nav-tabs">
                        <li class="nav-item"><a class="nav-link active" href="#product-desc" data-toggle="tab">课程简介</a></li>
                        <li class="nav-item"><a class="nav-link" href="#product-reviews" data-toggle="tab">用户评价（5）</a></li>
                    </ul>
                    <!-- END #product-tab -->
                    <!-- BEGIN #product-tab-content -->
                    <div id="product-tab-content" class="tab-content">
                        <!-- BEGIN #product-desc -->
                        <div id="product-desc" class="tab-pane fade active show">
                            <!-- BEGIN product-desc -->
                            <div class="product-desc">
                                <div class="desc">
									<h4>课程信息</h4>
                                    <div>
                                        <section>
                                            <table width="100%" cellpadding="0" cellspacing="0" class="detail-table">
                                                <thead>
                                                    <tr>
                                                        <th width="50%">名称</th>
                                                        <th width="25%">数量</th>
                                                        <th width="25%">单价</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>指弹吉他精品课程</td>
                                                        <td class="tc">1</td>
                                                        <td class="tc">50.00/天</td>
                                                    </tr>
                                                    <tr class="total">
                                                        <td></td>
                                                        <td class="tc">总价<br><strong>现价</strong></td>
                                                        <td class="tc">50元<br><strong>30元</strong>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <!-- END product-desc -->
                            <!-- BEGIN product-desc -->
                            <div class="product-desc right">
                                <div class="image image-1">
                                    <img src="images/jineng/art/guitar/guitar6.jpg" alt="" />
                                </div>
                                <div class="desc">
                                    <h4>适用对象</h4>
                                    <p>
                                        <ul>
                                            <li>了解指弹吉他的意义想要专项学习者</li>
                                            <li>独特炫酷的演奏方式，兴趣爱好或者专业提升</li>
                                            <li>有一些基础的学习者，或遇瓶颈无法继续提升</li>
                                        </ul>
                                    </p>
                                </div>
                            </div>
                            <!-- END product-desc -->
                            <!-- BEGIN product-desc -->
                            <div class="product-desc">
                                <div class="image image-1">
                                    <img src="images/jineng/art/guitar/guitar4.jpg" alt="" />
                                </div>
                                <div class="desc">
                                    <h4>学习目标</h4>
                                    <p>
                                        根据个人水平量身定制专属课程，提升课程-初级指弹课程-结合理论学习，通往吉他的另一种独特演绎方式。
                                    </p>
                                </div>
                            </div>
                            <!-- END product-desc -->
                            <!-- BEGIN product-desc -->
                            <div class="product-desc right">
                                <div class="image image-1">
                                    <img src="images/jineng/art/guitar/guitar2.jpg" alt="" />
                                </div>
                                <div class="desc">
                                    <h4>课程特色</h4>
                                    <p>
                                        根据个人水平量身定制专属课程，提升课程-初级指弹课程-结合理论学习，通往吉他的另一种独特演绎方式-一个人的乐队。
                                    </p>
                                </div>
                            </div>
                            <!-- END product-desc -->
                        </div>
                        <!-- END #product-desc -->
                        <!-- BEGIN #product-reviews -->
                        <div class="tab-pane fade" id="product-reviews">
                            <!-- BEGIN row -->
                            <div class="row row-space-30">
                                <!-- BEGIN col-7 -->
                                <div class="col-md-7">
                                    <!-- BEGIN review -->
                                    <div v-for="(item,detail) in message" v-bind:key="detail" class="review">
                                        <div class="review-info">
                                            <div class="review-icon"><img :src='item.picture2' alt="" /></div>
                                            <div class="review-name">{{item.name2}}</div>
                                            <div class="review-date">{{item.data2}}</div>
                                        </div>
                                        <div class="review-title">
                                            {{item.title2}}
                                        </div>
                                        <div class="review-message">
                                            {{item.content2}}
                                        </div>
                                    </div>
                                    <!-- END review -->
                                </div>
                                <!-- END col-7 -->
                                <!-- BEGIN col-5 -->
                                <div class="col-md-5">
                                    <!-- BEGIN review-form -->
                                    <div class="review-form">
                                        <form action="product_detail.html" name="review_form" method="POST">
                                            <h2>评价</h2>
                                            <div class="form-group">
                                                <label for="name">姓名 <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="name" />
                                            </div>
                                            <div class="form-group">
                                                <label for="email">标题 <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="email" />
                                            </div>
                                            <div class="form-group">
                                                <label for="review">内容 <span class="text-danger">*</span></label>
                                                <textarea class="form-control" rows="8" id="review"></textarea>
                                            </div>
                                            <button type="submit" class="btn btn-inverse btn-lg">提交</button>
                                        </form>
                                    </div>
                                    <!-- END review-form --> 
                                </div>
                                <!-- END col-5 -->
                            </div>
                            <!-- END row -->
                        </div>
                        <!-- END #product-reviews -->
                    </div>
                    <!-- END #product-tab-content -->
                </div>
                <!-- END product-tab -->
			</div>
            <!-- END product -->
            <!-- BEGIN similar-product -->
            <div class="similar-product">
                <h4 class="m-b-15 m-t-30">猜你喜欢</h4>
                <div class="row row-space-10">
                    <div v-for="(todo,detail) in youlike" v-bind:key="detail" class="col-md-2 col-sm-4">
                        <!-- BEGIN item -->
                        <div class="item item-thumbnail">
                            <a href="product_detail.html" class="item-image">
                                <img :src='todo.picture1' alt="">
                                <div class="discount">{{todo.discount}}</div>
                            </a>
                            <div class="item-info">
                                <h4 class="item-title">
                                    <a href="product.html">{{todo.name}}</a>
                                </h4>
                                <div class="item-price">{{todo.price}}</div>
                                <div class="item-discount-price">{{todo.originalprice}}</div>
                            </div>
                        </div>
                        <!-- END item -->
                    </div>
                </div>
            </div>
            <!-- END similar-product -->
        </div>
    </div>
</template>
<script>
import DetailParam from './../components/DetailParam'
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name:'detail',
        components:{
            swiper,
            swiperSlide,
            DetailParam
        },
        data(){
            return {
                product:{},//商品信息
                swiperOption:{
                    autoplay:true,
                    loop:true,
                    effect:'cube',
                    cubeEffect: {
                        slideShadows: true,
                        shadow: true,
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable:true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                },
                slideList:[
                    {
                        id:'21',
                        img:'images/jineng/art/guitar/guitar1.jpg'
                    },
                    {
                        id:'22',
                        img:'images/jineng/art/guitar/guitar2.jpg'
                    },
                    {
                        id:'23',
                        img:'images/jineng/art/guitar/guitar3.jpg'
                    },
                    {
                        id:'24',
                        img:'images/jineng/art/guitar/guitar4.jpg'
                    },
                    {
                        id:'25',
                        img:'images/jineng/art/guitar/guitar5.jpg'
                    },
                    {
                        id:'26',
                        img:'images/jineng/art/guitar/guitar6.jpg'
                    }
                ],
                message:[
                    {
                        id:11, 
                        picture2:'images/avator/man2.jpg',
                        name2:'Terry',
                        data2:'24/05/2016 7:40am',
                        title2:'课程很实惠',
                        content2:'这次学到了很多基础知识，谢谢老师！还会再来！！',
                    },
                    {
                        id:12,
                        picture2:'images/avator/man3.jpg',
                        name2:'George',
                        data2:'24/05/2016 8:40am',
                        title2:'课程很实惠',
                        content2:'这次学到了很多基础知识，谢谢老师！还会再来！！',
                    },
                    {
                        id:13,
                        picture2:'images/avator/man3.jpg',
                        name2:'Steve',
                        data2:'23/05/2016 8:40am',
                        title2:'课程很实惠',
                        content2:'这次学到了很多基础知识，谢谢老师！还会再来！！',
                    }
                ],
                youlike:[
                    {
                        picture1:'../img/guitar/guitar.jpg',
                        discount:'17% OFF',
                        name:'初级吉他教学',
                        originalprice:'12.00/天',
                        price:'10.00/天',
                    },
                    {
                        picture1:'../img/guitar/guitar2.jpg',
                        discount:'17% OFF',
                        name:'初级吉他教学',
                        originalprice:'12.00/天',
                        price:'10.00/天',
                    },
                    {
                        picture1:'../img/guitar/guitar3.jpg',
                        discount:'17% OFF',
                        name:'初级吉他教学',
                        originalprice:'12.00/天',
                        price:'10.00/天',
                    },
                    {
                        picture1:'../img/pingpong/乒乓球.jpg',
                        discount:'25% OFF',
                        name:'乒乓球教学',
                        originalprice:'20.00/天',
                        price:'15.00/天',
                    },
                    {
                        picture1:'../img/mandarin/普通话.jpg',
                        discount:'25% OFF',
                        name:'普通话教学',
                        originalprice:'40.00/天',
                        price:'30.00/天',
                    },
                    {
                        picture1:'../img/computer/计算机代码.jpg',
                        discount:'20% OFF',
                        name:'Java基础教学',
                        originalprice:'40.00/天',
                        price:'50.00/天',
                    }
                ]
            }
        },
        mounted(){
            // this.getProductInfo();
        },
        methods:{
            // getProductInfo(){
            //     let id = this.$route.params.id;
            //     this.axios.get(`.products/${id}`).then((res)=>{
            //         this.product = res;
            //     })
            // }
        }
    }
</script>
<style lang="scss">
    @import './../assets/scss/style-responsive.min.scss';    
    @import './../assets/scss/style.min.scss';
    .detail{
        .container{
            height: auto;
            .product{
                .product-detail{
                    .product-image-swiper{
                        width: 400px;
                        margin-top: 6rem;
                        margin-left: 2rem;
                        img{
                            width: 400px;
                            height: 300px;
                        }
                    }
                }
            }
        }
    }
    .pic>img {
        width: 100px;
        height: 100px;
    }
    .pic{
        margin-bottom: 2px;
    }
    .box1 ,.box2 ,.pic_box1 ,.pic_box2{
        display: inline-block;
    }
    .box2 > i{
        font-size: 12px;
        color: #00f;
    }
    .box2{
        font-size: 8px;
    }
    .redu > img{
        width: 5%;
    }
    .pic_box2 i{
        padding:5px;
    }
    .pic_box2{
        margin: 0 10px;
    }
    .pic_box2 div{
        margin-top: 10px;
    }
    .on_line{
        width: 50px;
        height: 20px;
        border-radius: 10%;
        text-align: center;
        background: #29d462;
        color: #fff;
        float: left;
        margin-left: 25px;
    }
    .box3-1{
        width: 70px;
        height: 35px;
        font-size: 12px;
        line-height: 38px;
        cursor: pointer;
        text-align: center;
        color: #fff;
        border-radius: 50px 0 0 50px;
        background: #1296db;
        display:inline-block;
    }
    .box3-2{
        width: 70px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: #1296db;
        border: solid 1px #1296db;
        border-left-color: rgb(255, 77, 128);
        border-left-style: solid;
        border-left-width: 1px;
        border-left: none;
        border-radius: 0 50px 50px 0;
        margin-top: 2px;
        display:inline-block;
    }
    .box3{
        height: 40px;
    }
    .product-btn{
        a{
            margin-right: 20px;
        }
    }
		.product-main-image img{
			width: 400px;
			height: auto;
		}
		.product-thumbnail-list li{
			float: left;
		}
		.product-thumbnail{
			width: auto;
			max-height: 80px;
			text-align: center;
			overflow: auto;
			padding: 5px;
			margin: 20px 40px 20px 55px;
		}
		.product-main-image{
			margin-left: 40px;
			margin-right: 40px;
			margin-top: 100px;
			height: auto;
			width: auto;
		}
		.product-desc.right .desc{
			text-align: left;
		}
		.product-desc .desc{
			padding-left: 0;
		}
		.icon-1 img{
			width: 30px;
		}
		.image-1 img{
			width: 300px;
			height: 200px;
		}
		#ending-words{
			margin: 0 auto;
		}
		#ending-words div{
			width: auto;
			/* font-weight: normal; */
		}
		#ending-words div h5{
			font-weight: normal;
		}
        .similar-product{
            margin-bottom: 6rem;
        }
</style>